<template>
  <div class="dashboard">
    <!-- 标题 -->
    <div class="header">
      <div class="header-main">
        <h1 class="title">租赁大数据调度中心</h1>
      </div>
    </div>

    <!-- 1. 左上：月度缴费饼图 -->
    <div class="chart-abs" style="left: 50px; top: 100px; width: 460px; height: 360px;">
      <ChartBorder
        :width="460"
        :height="300"
        border-type="image"
        :border-image="border4Image"
        :padding="[20, 20, 15, 15]"
      >
        <PaymentStatusPie
          :paid="paidCount"
          :unpaid="unpaidCount"
          :overdue="overdueCount"
          :width="420"
          :height="300"
        />
      </ChartBorder>
    </div>

    <!-- 2. 中上：核心数据卡片 -->
    <!-- 注意：CoreHousingStats 不需要 ChartBorder，直接放 -->
    <div class="chart-abs" style="left: 520px; top: 100px; width: 880px; height: 315px;">
      <CoreHousingStats
        :total-houses="12580"
        :vacant-houses="1245"
        :occupied-houses="11335"
        :expiring-contracts="328"
        :overdue-houses="89"
        :payment-rate="94.7"
      />
    </div>

    <!-- 3. 右上：房屋状态饼图 -->
    <div class="chart-abs" style="left: 1430px; top: 100px; width: 460px; height: 360px;">
      <ChartBorder
        :width="460"
        :height="300"
        border-type="image"
        :border-image="border4Image"
        :padding="[20, 20, 15, 15]"
      >
        <HousingStatusPie
          :occupied="occupiedHouses"
          :vacant="vacantHouses"
          :width="420"
        :height="300"
        />
      </ChartBorder>
    </div>

    <!-- 4. 右下：逾期滚动列表 -->
    <div class="chart-abs" style="left: 50px; top: 420px; width: 550px; height: 420px;">
      <!--<div class="chart-abs" style="left: 1000px; top: 780px; width: 900px; height: 260px;">-->
      <ChartBorder
        :width="500"
        :height="350"
        border-type="image"
        :border-image="border4Image"
        :padding="[20, 20, 25, 15]"
      >
        <OverdueScrollList
          :data="overdueRecords"
          :height="250"
          :items-per-page="5"
          :scroll-interval="4000"
        />
      </ChartBorder>
    </div>

    <!-- 5. 中左：楼栋入住率 -->
    <div class="chart-abs" style="left: 580px; top: 420px; width: 820px; height: 350px;">
      <ChartBorder
        :width="760"
        :height="350"
        border-type="image"
        :border-image="border4Image"
        :padding="[20, 20, 15, 15]"
      >
        <BuildingOccupancyBar
          :data="buildingOccupancyData"
          :width="700"
        :height="400 - 20 - 55"
        />
      </ChartBorder>
    </div>

    <!-- 6. 中右：户籍分布 -->
    <div class="chart-abs" style="left: 1330px; top: 420px; width: 550px; height: 350px;">
      <ChartBorder
        :width="550"
        :height="350"
        border-type="image"
        :border-image="border4Image"
        :padding="[20, 20, 15, 15]"
      >
        <ResidentOriginBar
          :data="residentOriginData"
          :width="500"
        :height="400 - 20 - 55"
        />
      </ChartBorder>
    </div>

    <!-- 7. 左下：合同到期预警 -->
    <div class="chart-abs" style="left: 30px; top: 780px; width: 920px; height: 380px;">
      <ChartBorder
        :width="950"
        :height="260"
        border-type="image"
        :border-image="border4Image"
        :padding="[20, 20, 15, 15]"
      >
        <ContractExpiryBar
          :data="contractExpiryData"
          :width="900"
          :height="210"
        />
      </ChartBorder>
    </div>



    <!-- 8. 左中：趋势折线图 -->
    <div class="chart-abs" style="left: 1000px; top: 780px; width: 900px; height: 260px;">
      <!--<div class="chart-abs" style="left: 50px; top: 420px; width: 550px; height: 450px;">-->
      <ChartBorder
        :width="880"
        :height="260"
        border-type="image"
        :border-image="border4Image"
        :padding="[30, 40, 15, 15]"
      >
        <OccupancyTrendLine
          :data="occupancyTrendData"
          :width="840"
          :height="220"
        />
      </ChartBorder>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChartCard from '@/components/ChartCard.vue'
import ChartBorder from '@/components/ChartBorder.vue'
import border4Image from '@/assets/border/border4.png'
import CoreHousingStats from '@/components/CoreHousingStats.vue'
import HousingStatusPie from '@/components/HousingStatusPie.vue'
import ContractExpiryBar from '@/components/ContractExpiryBar.vue'
import BuildingOccupancyBar from '@/components/BuildingOccupancyBar.vue'
import PaymentStatusPie from '@/components/PaymentStatusPie.vue'
import ResidentOriginBar from '@/components/ResidentOriginBar.vue'
import OverdueScrollList from '@/components/OverdueScrollList.vue'
import OccupancyTrendLine from '@/components/OccupancyTrendLine.vue'

// 数据（保持不变）
const totalHouses = ref(12580)
const vacantHouses = ref(1245)
const occupiedHouses = ref(11335)
const expiringContracts = ref(328)
const overdueHouses = ref(89)
const paymentRate = ref(94.7)

const contractExpiryData = ref([
  { name: '0-10天', value: 42 },
  { name: '11-20天', value: 38 },
  { name: '21-30天', value: 40 },
  { name: '31-40天', value: 35 },
  { name: '41-50天', value: 32 },
  { name: '51-60天', value: 28 },
  { name: '61-70天', value: 25 }
])

const buildingOccupancyData = ref([
  { name: '博士楼1栋', value: 76 },
  { name: '职工楼B3栋', value: 89 },
  { name: '职工楼B2栋', value: 83 },
  { name: '职工楼B1栋', value: 95 },
  { name: '博士楼B11栋', value: 78 },
  { name: '博士楼B7栋', value: 87 },
  { name: '博士楼2栋', value: 92 }
])

const paidCount = ref(11245)
const unpaidCount = ref(1246)
const overdueCount = ref(89)

const residentOriginData = ref([
  { name: '北京市', value: 1245 },
  { name: '上海市', value: 987 },
  { name: '广东省', value: 856 },
  { name: '江苏省', value: 743 },
  { name: '浙江省', value: 689 },
  { name: '山东省', value: 567 },
  { name: '河南省', value: 432 },
  { name: '四川省', value: 398 },
  { name: '湖北省', value: 356 },
  { name: '河北省', value: 321 }
])

const overdueRecords = ref([
  { name: '张三', roomNumber: 'A101', paymentType: 'rent', amount: 2800 },
  { name: '李四', roomNumber: 'B203', paymentType: 'electricity', amount: 156 },
  { name: '王五', roomNumber: 'C305', paymentType: 'water', amount: 89 },
  { name: '赵六', roomNumber: 'D401', paymentType: 'gas', amount: 120 },
  { name: '钱七', roomNumber: 'E502', paymentType: 'rent', amount: 3200 },
  { name: '孙八', roomNumber: 'F603', paymentType: 'electricity', amount: 203 },
  { name: '周九', roomNumber: 'G701', paymentType: 'water', amount: 67 },
  { name: '吴十', roomNumber: 'H802', paymentType: 'gas', amount: 98 },
  { name: '郑十一', roomNumber: 'I901', paymentType: 'rent', amount: 2600 },
  { name: '王十二', roomNumber: 'J1002', paymentType: 'electricity', amount: 178 }
])
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.dashboard {
  width: $design-width;
  height: $design-height;
  position: relative;
  overflow: hidden;
}

.header {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header-main {
  background-image: url('@/assets/images/border1.gif');
  background-repeat: no-repeat;
  background-position: center;
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  color: #e6ff00;
  font-size: 40px;
  position: relative;
  z-index: 1;
}

// 所有图表容器：绝对定位
.chart-abs {
  position: absolute;
  // 确保内容不会因子元素 overflow 而破坏布局
  overflow: hidden;
}
</style>
